<button id="filter-toggle" type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#filterdiv">
  Hide/Show filter
</button>
  
<div id="filterdiv" class="collapse well well-small">  
  <form  id="filter" class="nav form-search">
    <table class="searchTable">
      <tr>
        <td class="text">Time</td>
        <td colspan="5">
          <select onChange="timeSelectDisable()" name="timeSelect" id="timeSelect">
            <option value="all">All</option>
            <option value="from">From</option>
            <option value="until">Until</option>
            <option value="between">Between</option>
            <option value="outside">Not During</option>
          </select>
          <input type="date" placeholder="Start date" name="startDate" id="startDate" readOnly Title="Date in dd/mm/yyyy or dd/mm/yy format, using / or -" pattern="^(?:(?:31(-|\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(-|\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(-|\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(-|\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"></input>
          <input type="date" placeholder="End date" name="endDate" id="endDate" readOnly Title="Date in dd/mm/yyyy or dd/mm/yy format, using / or -" pattern="^(?:(?:31(-|\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(-|\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(-|\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(-|\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"></input>
          <select name="timeTypeSelect" id="timeTypeSelect" readOnly>
            <option value="Modified">Last (Major) Update</option>
            <option value="Published">Published</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="text">CVSS</td>
        <td>
          <select name="cvssSelect" id="cvssSelect" onChange="cvssSelectDisable()">
            <option value="all">All</option>
            <option value="above">Above</option>
            <option value="equals">Equals</option>
            <option value="below">Below</option>
          </select>
          <input name="cvss" id="cvss" type="number" readOnly min="0" max="10" step="0.5" value="0"></input>
        </td>
      </tr>
      {% if filters is defined %}
        {% for filterSet in filters %}
          {% if not (filterSet['auth'] and not current_user.is_authenticated()) %}
            <tr><td>{{filterSet['id']}}</td><td>
              {% for filter_ in filterSet['filters'] %}
                {% if   filter_['type'] == "select" %}
                  <select name="plug_{{filter_['id']}}" id="plug_{{filter_['id']}}">
                    {% for entry in filter_['values'] %} <option value="{{entry['id']}}">{{entry['text']}}</option> {% endfor %}
                  </select>
                {% elif filter_['type'] == "text" or filter_['type'] == "checkbox"%}
                  {% if 'label' in filter_ %}<span>{{filter_['label']}}</span>{% endif %}
                  <input name="plug_{{filter_['id']}}" id="plug_{{filter_['id']}}" type="{{filter_['type']}}"></input>
                {% endif %}
              {% endfor %}
            </td></tr>
          {% endif %}
        {% endfor %}
      {% endif %}
    </table>
    <input type="button" value="Search" onclick="myFilter()"/>
  </form>
</div>


<script>
function myFilter(){
        var lignes = document.querySelectorAll("#CVEs tr:not(.warning)");  
        var numValue = Number(document.getElementById("cvss").value);
        for ( i = 0 ; i < lignes.length; i++){  
  	  var cvssLigne = Number(lignes[i].querySelector("td[data-type='CVSS']").getAttribute("data-value"));  
          switch (document.getElementById("cvssSelect").value){
            case 'above':
              var filtreCvss = (cvssLigne >= numValue );
              break;
            case 'equals':
              var filtreCvss = (cvssLigne === numValue );
              break;
            case 'below':
              var filtreCvss = (cvssLigne <= numValue );
              break;
            default:
              var filtreCvss = 1;
          }
          
          if (document.getElementById("timeTypeSelect").value == "Modified"){
            var mydate = lignes[i].querySelector("td[data-type='MODIFIED']").getAttribute("data-value");
          }else{
            var mydate = lignes[i].querySelector("td[data-type='PUBLISHED']").getAttribute("data-value");
          }
          mydate = mydate.split("/");
          mydate = Number(mydate[2]+mydate[0]+mydate[1]);

          var filtreDate = 0;
          switch (document.getElementById("timeSelect").value){
            case 'from':
              var startDate = document.getElementById("startDate").value;
              startDate=  Number(startDate.replace(/-/g,''));
              filtreDate = (startDate<= mydate);
              break;            
            case 'until':
              var endDate = document.getElementById("endDate").value;
              endDate=  Number(endDate.replace(/-/g,''));
              filtreDate = (endDate >= mydate);        
              break;            
            case 'between':
              var startDate = document.getElementById("startDate").value;
              startDate=  Number(startDate.replace(/-/g,''));
              var endDate = document.getElementById("endDate").value;
              endDate=  Number(endDate.replace(/-/g,''));
              filtreDate = (startDate<= mydate) && (endDate >= mydate);
              break;            
            case 'outside':
              var startDate = document.getElementById("startDate").value;
              startDate=  Number(startDate.replace(/-/g,''));
              var endDate = document.getElementById("endDate").value;
              endDate=  Number(endDate.replace(/-/g,''));
              filtreDate = (startDate > mydate) || (endDate < mydate);
              break;            
            default:
              filtreDate = 1;
          }

	  lignes[i].style.display = (filtreCvss && filtreDate) ? "" : "none";  
        }
}
</script>
